import React, { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { Collapse } from "react-vant";
type Props = {};

const Seat = (props: Props) => {
  const location = useLocation();
  const navigate = useNavigate();
  const [obj, setObj] = useState(
    JSON.parse(localStorage.getItem("obj") as any)
  );
  //返回到车次列表页面
  const goHome = () => {
    navigate("/querylist");
  };
  //获取日历时间
  const date = localStorage.getItem("date");
  //去订单填写页面
  const btn = () => {
    navigate("/filling");
  };
  return (
    <div className="seat">
      <header>
        <span onClick={goHome}>{"<"}</span>
        <span>{obj.train}</span>
        <span></span>
      </header>
      <main>
        <div style={{ width: "100%", height: "20px" }}></div>
        <div className="box1">
          <div className="zuo">
            <span style={{ fontWeight: "800", fontSize: "16px" }}>
              {obj.start}
            </span>
            <span style={{ fontWeight: "800", fontSize: "16px" }}>
              {obj.starttime}
            </span>
            <span>{date}</span>
          </div>
          <div className="zhong">
            <span>{obj.train}</span>
            <span>
              ——<span style={{ color: "rgb(0, 172, 189)" }}>时刻表</span>——
            </span>
            <span>消耗{obj.time}</span>
          </div>
          <div className="you">
            <span style={{ fontWeight: "800", fontSize: "16px" }}>
              {obj.end}
            </span>
            <span style={{ fontWeight: "800", fontSize: "16px" }}>
              {obj.endtime}
            </span>
            <span>{date}</span>
          </div>
        </div>
        <div className="box2">
          <Collapse initExpanded={["0"]}>
            <Collapse.Item title="二等座" name="1">
              <div className="box2-1">
                <p onClick={btn}>
                  快速预订 {obj.price}元<button>买票</button>
                </p>
                <p>
                  普通预定 {obj.price}元<button>买票</button>
                </p>
              </div>
            </Collapse.Item>
            <Collapse.Item title="一等座" name="2">
              已售完
            </Collapse.Item>
            <Collapse.Item title="商务座" name="3">
              已售完
            </Collapse.Item>
          </Collapse>
        </div>
      </main>
    </div>
  );
};

export default Seat;